<template>
  <div class="container">
    <el-row>
      <el-col :span="12" :offset="5">
        <el-input v-model.trim="IP" placeholder="请输入IP" clearable>
          <template slot="append">
            <el-button :disabled="IP.length==0" type="primary" @click="search">搜索</el-button>
          </template>
        </el-input>
      </el-col>
    </el-row>
    <el-row v-if="hasInfoDetail" class="mt-40">
      <el-col :sm="10" :xm="10" >
        <el-form label-width="160px">
          <el-form-item label="IP:">{{ iPDetailInfo.ip }}</el-form-item>
          <el-form-item v-if="iPDetailInfo.country['names']['zh-CN']!='' || iPDetailInfo.country['names']['en']!=''" label="所在国家/特别行政区:">
            {{ iPDetailInfo.country['names']['zh-CN']==''?iPDetailInfo.country['names']['en']:iPDetailInfo.country['names']['zh-CN'] }}
          </el-form-item>
          <el-form-item label="所在省份:">
            <span v-for="(item,index) in iPDetailInfo.subdivisions" :key="index">
              {{ item['names']['zh-CN']==undefined?item['names']['en']:item['names']['zh-CN'] }}
              <span v-if="index < iPDetailInfo.subdivisions.length-1">/</span>
            </span>
          </el-form-item>

          <el-form-item v-if="iPDetailInfo.city['names']['zh-CN']!='' || iPDetailInfo.city['names']['en']!=''" label="所在城市:">
            {{ iPDetailInfo.city['names']['zh-CN']==''?iPDetailInfo.city['names']['en']:iPDetailInfo.city['names']['zh-CN'] }}
          </el-form-item>
          <el-form-item label="坐标:">{{ iPDetailInfo.location['latitude'] }},{{ iPDetailInfo.location['longitude'] }}</el-form-item>
          <el-form-item label="时区:">{{ iPDetailInfo.location['time_zone'] }}</el-form-item>
          <el-form-item label="ISP:">{{ iPDetailInfo.traits['isp'] }}</el-form-item>
          <el-form-item label="Address type:">{{ ipType }}</el-form-item>
        </el-form>

      </el-col>
      <el-col :sm="14" :xm="14" >
        <el-form label-width="230px">
          <el-form-item label="字段信息"/>
          <el-form-item v-if="iPDetailInfo.city && iPDetailInfo.city['geoname_id']!=undefined" label="city_geoname_id:">{{ iPDetailInfo.city['geoname_id'] }}</el-form-item>
          <el-form-item v-if="iPDetailInfo.city['names']['zh-CN']!=undefined || iPDetailInfo.city['names']['en']!=undefined" label="city_names:">
            {{ iPDetailInfo.city['names']['zh-CN']==undefined?iPDetailInfo.city['names']['en']:iPDetailInfo.city['names']['zh-CN'] }}
          </el-form-item>

          <el-form-item v-if="iPDetailInfo.continent && iPDetailInfo.continent['code']!=undefined" label="continent_code:">{{ iPDetailInfo.continent['code'] }}</el-form-item>
          <el-form-item v-if="iPDetailInfo.continent && iPDetailInfo.continent['geoname_id']!=undefined" label="continent_geoname_id:">{{ iPDetailInfo.continent['geoname_id'] }}</el-form-item>
          <el-form-item v-if="iPDetailInfo.continent['names']['zh-CN']!=undefined || iPDetailInfo.continent['names']['en']!=undefined" label="continent_names:">
            {{ iPDetailInfo.continent['names']['zh-CN']==undefined?iPDetailInfo.continent['names']['en']:iPDetailInfo.continent['names']['zh-CN'] }}
          </el-form-item>

          <el-form-item v-if="iPDetailInfo.country && iPDetailInfo.country['geoname_id']!=undefined" label="country_geoname_id:">{{ iPDetailInfo.country['geoname_id'] }}</el-form-item>
          <el-form-item v-if="iPDetailInfo.country && iPDetailInfo.country['iso_code']!=undefined" label="country_iso_code:">{{ iPDetailInfo.country['iso_code'] }}</el-form-item>
          <el-form-item v-if="iPDetailInfo.country && iPDetailInfo.country['is_in_european_union']!=undefined" label="country_is_in_european_union:">{{ iPDetailInfo.country['is_in_european_union'] }}</el-form-item>
          <el-form-item v-if="iPDetailInfo.country['names']['zh-CN']!=undefined || iPDetailInfo.country['names']['en']!=undefined" label="country_names:">
            {{ iPDetailInfo.country['names']['zh-CN']==undefined?iPDetailInfo.country['names']['en']:iPDetailInfo.country['names']['zh-CN'] }}
          </el-form-item>

          <el-form-item v-if="iPDetailInfo.location && iPDetailInfo.location['latitude']!=undefined" label="location_latitude:">{{ iPDetailInfo.location['latitude'] }}</el-form-item>
          <el-form-item v-if="iPDetailInfo.location && iPDetailInfo.location['longitude']!=undefined" label="location_longitude:">{{ iPDetailInfo.location['longitude'] }}</el-form-item>
          <el-form-item v-if="iPDetailInfo.location && iPDetailInfo.location['time_zone']!=undefined" label="location_time_zone:">{{ iPDetailInfo.location['time_zone'] }}</el-form-item>
          <el-form-item v-if="iPDetailInfo.location && iPDetailInfo.location['weather_code']!=undefined" label="location_weather_code:">{{ iPDetailInfo.location['weather_code'] }}</el-form-item>

          <el-form-item v-if="iPDetailInfo.postal && iPDetailInfo.postal['code']!=undefined" label="postal_code:">{{ iPDetailInfo.postal['code'] }}</el-form-item>
          <div v-for="(item,index) in iPDetailInfo.subdivisions" :key="index">
            <el-form-item label="subdivisions_geoname_id:">{{ item['geoname_id'] }}</el-form-item>
            <el-form-item v-if="item['names']['zh-CN']!=undefined || item['names']['en']!=undefined" :label="`subdivisions_names_${index+1}:`">
              {{ item['names']['zh-CN']==undefined?item['names']['en']:item['names']['zh-CN'] }}
            </el-form-item>
          </div>

          <el-form-item v-if="iPDetailInfo.traits && iPDetailInfo.traits['connection_type']!=undefined" label="traits_connection_type:">{{ iPDetailInfo.traits['connection_type'] }}</el-form-item>
          <el-form-item v-if="iPDetailInfo.traits && iPDetailInfo.traits['isp']!=undefined" label="traits_isp:">{{ iPDetailInfo.traits['isp'] }}</el-form-item>
          <el-form-item v-if="iPDetailInfo.traits && iPDetailInfo.traits['organization']!=undefined" label="traits_organization:">{{ iPDetailInfo.traits['organization'] }}</el-form-item>

        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getIPDetail } from '@/api/IP-query';
export default {
  data() {
    return {
      IP: '',
      iPDetailInfo: {},
      hasInfoDetail: false,
      ipType: ''
    };
  },
  mounted() {
    if (JSON.stringify(this.$route.query) !== '{}') {
      this.IP = this.$route.query.ip;
      this.getIPDetailInfo();
    }
  },
  methods: {
    getIPDetailInfo() {
      getIPDetail({ ip: this.IP })
        .then(result => {
          if (result.state == 1) {
            this.iPDetailInfo = result.result;
            if (result.result == null) {
              this.$message.info(`[${this.IP}]无查询结果！`);
              this.hasInfoDetail = false;
              return false;
            } else {
              this.iPDetailInfo['ip'] = this.IP;
              this.ipType = result.type;
              this.hasInfoDetail = true;
            }
          } else {
            this.$message.error(result.clientMsg);
            this.hasInfoDetail = false;
          }
        })
        .catch(() => {
          this.hasInfoDetail = false;
        });
    },
    search() {
      this.getIPDetailInfo();
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  width: 960px;
  margin: 30px auto;
  & /deep/ .el-input-group__append {
    background-color: #409eff;
    border: 1px solid #409eff;
    color: #fff;
  }
  & /deep/ .el-form-item {
    margin-bottom: 0px;
  }
  & /deep/ .el-form-item__label,
  & /deep/.el-form-item__content {
    line-height: 32px;
  }
  p {
    font-size: 14px;
    color: #606266;
    font-weight: bold;
    line-height: 32px;
  }
  .mt {
    &-40 {
      margin-top: 40px;
    }
  }
}
</style>

